<template>
  <!-- 根容器，使用Element UI的app-container样式 -->
  <div class="app-container">
    <!-- 搜索表单：inline=true表示行内布局，model绑定查询参数对象，ref用于表单引用，label-width设置标签宽度 -->
    <el-form :inline="true" :model="queryParams" ref="queryRef" label-width="80px">
      <!-- 学号查询项：v-model绑定查询参数的studentNo，placeholder提示文本，clearable提供清空按钮，按回车触发搜索 -->
      <el-form-item label="学号">
        <el-input v-model="queryParams.studentNo" placeholder="学号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 姓名查询项：同上，绑定queryParams.name -->
      <el-form-item label="姓名">
        <el-input v-model="queryParams.name" placeholder="姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 身份证查询项：绑定queryParams.idCard -->
      <el-form-item label="身份证">
        <el-input v-model="queryParams.idCard" placeholder="身份证号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 电话查询项：绑定queryParams.phone -->
      <el-form-item label="电话">
        <el-input v-model="queryParams.phone" placeholder="电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 状态下拉查询项：绑定queryParams.status，提供在读/休学/结业/退学选项 -->
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="学员状态" clearable>
          <el-option label="在读" value="在读" />
          <el-option label="休学" value="休学" />
          <el-option label="结业" value="结业" />
          <el-option label="退学" value="退学" />
        </el-select>
      </el-form-item>
      <!-- 操作按钮组：搜索和重置按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 功能按钮行：gutter设置列间距，mb8自定义底部边距 -->
    <el-row :gutter="10" class="mb8">
      <!-- 新增按钮：占1.5列，primary样式，图标el-icon-plus，mini尺寸，点击触发新增，v-hasPermi控制权限 -->
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jiaxiao:student:add']">新增</el-button>
      </el-col>
      <!-- 修改按钮：success样式，图标el-icon-edit，disabled绑定single（是否单选），点击触发修改 -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['jiaxiao:student:edit']">修改</el-button>
      </el-col>
      <!-- 删除按钮：danger样式，图标el-icon-delete，disabled绑定multiple（是否未选），点击触发删除 -->
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['jiaxiao:student:remove']">删除</el-button>
      </el-col>
      <!-- 导出按钮：注释状态，未启用 -->
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jiaxiao:student:export']">导出</el-button>
      </el-col> -->
      <!-- 导入按钮：注释状态，未启用 -->
      <!-- <el-col :span="1.5">
        <el-upload :action="upload.url" :headers="upload.headers" :on-success="handleImportSuccess" :show-file-list="false" :before-upload="beforeUpload" accept=".xlsx,.xls" v-hasPermi="['jiaxiao:student:import']">
          <el-button type="info" plain icon="el-icon-upload2" size="mini">导入</el-button>
        </el-upload>
      </el-col> -->
      <!-- 右侧工具栏：控制搜索区域显示/隐藏，触发表格查询 -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 学员列表表格：v-loading绑定加载状态，:data绑定表格数据，@selection-change监听多选事件 -->
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <!-- 多选列：宽度55px，居中对齐 -->
      <el-table-column type="selection" width="55" align="center" />
      <!-- 学号列：label列标题，prop绑定数据字段，宽度120px -->
      <el-table-column label="学号" prop="studentNo" width="120" />
      <!-- 姓名列：绑定name字段 -->
      <el-table-column label="姓名" prop="name" width="120" />
      <!-- 性别列：绑定gender字段 -->
      <el-table-column label="性别" prop="gender" width="80" />
      <!-- 电话列：绑定phone字段 -->
      <el-table-column label="电话" prop="phone" width="140" />
      <!-- 状态列：绑定status字段 -->
      <el-table-column label="状态" prop="status" width="100" />
      <!-- 进度列：绑定licenseStatus字段 -->
      <el-table-column label="进度" prop="licenseStatus" width="100" />
      <!-- 报名日期列：绑定enrollDate字段 -->
      <el-table-column label="报名日期" prop="enrollDate" width="140" />
      <!-- 操作列：固定在右侧，宽度220px -->
      <el-table-column label="操作" fixed="right" width="220">
        <!-- 作用域插槽：获取当前行数据scope.row -->
        <template slot-scope="scope">
          <!-- 修改按钮：文本类型，点击传入当前行数据 -->
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['jiaxiao:student:edit']">修改</el-button>
          <!-- 状态变更按钮：点击传入当前行数据 -->
          <el-button size="mini" type="text" @click="handleChangeStatus(scope.row)" v-hasPermi="['jiaxiao:student:edit']">状态变更</el-button>
          <!-- 删除按钮：红色文本，点击传入当前行数据 -->
          <el-button size="mini" type="text" class="text-danger" @click="handleDelete(scope.row)" v-hasPermi="['jiaxiao:student:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件：v-show控制分页显示（总条数>0时显示），:total绑定总条数，:page.sync双向绑定页码，:limit.sync双向绑定页大小，@pagination触发分页查询 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 新增/编辑对话框：:title绑定对话框标题，:visible.sync双向绑定显示状态，width设置宽度 -->
    <el-dialog :title="title" :visible.sync="open" width="600px">
      <!-- 表单：ref用于表单引用，:model绑定表单数据，label-width设置标签宽度 -->
      <el-form ref="formRef" :model="form" label-width="100px">
        <!-- 学号输入项：绑定form.studentNo -->
        <el-form-item label="学号">
          <el-input v-model="form.studentNo" />
        </el-form-item>
        <!-- 姓名输入项：绑定form.name -->
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <!-- 性别下拉项：绑定form.gender，提供男/女选项 -->
        <el-form-item label="性别">
          <el-select v-model="form.gender">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <!-- 年龄输入项：数字输入框，min=0限制最小年龄 -->
        <el-form-item label="年龄">
          <el-input-number v-model="form.age" :min="0" />
        </el-form-item>
        <!-- 身份证号输入项：绑定form.idCard -->
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard" />
        </el-form-item>
        <!-- 电话输入项：绑定form.phone -->
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <!-- 住址输入项：绑定form.address -->
        <el-form-item label="住址">
          <el-input v-model="form.address" />
        </el-form-item>
        <!-- 报名日期选择项：日期类型，value-format设置日期格式，placeholder提示 -->
        <el-form-item label="报名日期">
          <el-date-picker v-model="form.enrollDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <!-- 学员状态下拉项：绑定form.status，提供在读/休学/结业/退学选项 -->
        <el-form-item label="学员状态">
          <el-select v-model="form.status">
            <el-option label="在读" value="在读" />
            <el-option label="休学" value="休学" />
            <el-option label="结业" value="结业" />
            <el-option label="退学" value="退学" />
          </el-select>
        </el-form-item>
        <!-- 进度下拉项：绑定form.licenseStatus，提供报名/学习/考试/待发证/已发证选项 -->
        <el-form-item label="进度">
          <el-select v-model="form.licenseStatus">
            <el-option label="报名" value="报名" />
            <el-option label="学习" value="学习" />
            <el-option label="考试" value="考试" />
            <el-option label="待发证" value="待发证" />
            <el-option label="已发证" value="已发证" />
          </el-select>
        </el-form-item>
        <!-- 备注输入项：多行文本框 -->
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮区：slot="footer"指定底部插槽 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>

    <!-- 状态变更对话框：标题固定为"状态变更"，双向绑定显示状态，宽度400px -->
    <el-dialog title="状态变更" :visible.sync="statusOpen" width="400px">
      <!-- 状态变更表单：绑定statusForm数据 -->
      <el-form :model="statusForm" label-width="100px">
        <!-- 新状态下拉项：绑定statusForm.toStatus -->
        <el-form-item label="新状态">
          <el-select v-model="statusForm.toStatus">
            <el-option label="在读" value="在读" />
            <el-option label="休学" value="休学" />
            <el-option label="结业" value="结业" />
            <el-option label="退学" value="退学" />
          </el-select>
        </el-form-item>
        <!-- 状态变更备注：多行文本框，绑定statusForm.remark -->
        <el-form-item label="备注">
          <el-input v-model="statusForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <!-- 状态变更对话框底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="statusOpen=false">取消</el-button>
        <el-button type="primary" @click="submitStatus">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入学员相关API接口：列表查询、单条查询、新增、修改、删除、状态变更、导出
import { listStudent, getStudent, addStudent, updateStudent, delStudent, changeStudentStatus, exportStudent } from '@/api/jiaxiao/student'
// 导入获取Token的工具函数（用于接口鉴权）
import { getToken } from '@/utils/auth'

// 导出组件
export default {
  name: 'JxStudent', // 组件名称
  data() { // 组件数据定义
    return {
      loading: false, // 表格加载状态（true=加载中）
      showSearch: true, // 搜索区域显示状态（true=显示）
      total: 0, // 表格总条数
      list: [], // 表格数据列表
      single: true, // 是否单选（true=未单选/多选，用于控制修改按钮禁用）
      multiple: true, // 是否未选（true=未选择任何数据，用于控制删除按钮禁用）
      ids: [], // 选中的数据ID集合（用于批量操作）
      // 查询参数：页码、页大小、学号、姓名、身份证、电话、状态
      queryParams: { pageNum: 1, pageSize: 10, studentNo: undefined, name: undefined, idCard: undefined, phone: undefined, status: undefined },
      title: '', // 新增/编辑对话框标题
      open: false, // 新增/编辑对话框显示状态
      form: {}, // 新增/编辑表单数据
      statusOpen: false, // 状态变更对话框显示状态
      // 状态变更表单数据：学员ID、目标状态、备注
      statusForm: { studentId: undefined, toStatus: undefined, remark: '' },
      // 导入配置：接口URL（拼接基础API地址）、请求头（携带Token鉴权）
      upload: {
        url: process.env.VUE_APP_BASE_API + '/jiaxiao/student/importData',
        headers: { Authorization: 'Bearer ' + getToken() }
      }
    }
  },
  created() { // 组件创建生命周期钩子：页面加载时触发
    this.getList() // 初始化加载学员列表
  },
  methods: { // 组件方法定义
    // 1. 获取学员列表
    getList() {
      this.loading = true // 开启加载状态
      // 调用列表查询API，传入查询参数
      listStudent(this.queryParams).then(res => {
        this.list = res.rows // 赋值表格数据（分页数据）
        this.total = res.total // 赋值总条数
        this.loading = false // 关闭加载状态
      })
    },
    // 2. 搜索按钮触发：重置页码为1，重新查询列表
    handleQuery() { this.queryParams.pageNum = 1; this.getList() },
    // 3. 重置搜索：重置表单字段，重新查询列表
    resetQuery() { this.$refs.queryRef && this.$refs.queryRef.resetFields(); this.handleQuery() },
    // 4. 表格多选事件：更新选中ID集合、单选/未选状态
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.studentId) // 提取选中项的ID到ids数组
      this.single = selection.length !== 1 // 若选中1条则single=false（修改按钮启用）
      this.multiple = !selection.length // 若选中>=1条则multiple=false（删除按钮启用）
    },
    // 5. 新增按钮触发：设置对话框标题、清空表单、打开对话框
    handleAdd() { this.title = '新增学员'; this.form = {}; this.open = true },
    // 6. 修改按钮触发：获取选中行ID，查询单条数据并回显到表单
    handleUpdate(row) {
      // 若传入row（表格行点击）则取row.studentId，否则取ids数组第一个（批量选中时）
      const id = row && row.studentId ? row.studentId : this.ids[0]
      // 调用单条查询API，获取数据后回显到表单，设置标题并打开对话框
      getStudent(id).then(({ data }) => { this.form = data; this.title = '编辑学员'; this.open = true })
    },
    // 7. 新增/编辑保存按钮触发：判断新增/修改，调用对应API
    submitForm() {
      // 若表单有studentId则为修改（调用updateStudent），否则为新增（调用addStudent）
      const req = this.form.studentId ? updateStudent(this.form
